<template>
	<footer>
		<div @click="ToPath('class')">
			<span class="clases" :class="{active:routeName=='class'}"></span>
			<span>课堂表现</span>
		</div>
		<div @click="ToPath('homework')">
			<span class="homework" :class="{active:routeName=='homework'}"></span>
			<span>作业本</span>			
		</div>		
		<div @click="ToPath('video')">
			<span class="video" :class="{active:routeName=='video'}"></span>
			<span>精品课</span>			
		</div>
		<div @click="ToPath('wrongbook')">
			<span class="wrongbook" :class="{active:routeName=='wrongbook'}"></span>
			<span>错题本</span>			
		</div>
		<div @click="ToPath('studyDiagnosis')">
			<span class='studyDiagnosis' :class="{active:routeName=='studyDiagnosis'}"></span>
			<span>学情诊断</span>
			
		</div>
	</footer>
</template>
<script>
	export default {
		activated(){	
			this.routeName=this.$route.name
		},
		data(){
			return{
				routeName:'',
				noClass:false
			}
		},
		methods: {
			ToPath(path){
				//如果是在此页面点击。那么不用跳转
				if(path==this.$route.name){				
					return false
				}				
				this.$router.replace({path: `/${path}`})		
			}
		}
	}
</script>
<style scoped>
	footer{
		width: 100%;
		display: flex;
		height: 49px;
		position: fixed;
		bottom: 0;
		font-size: 10px;
		color: #3C3C3C;
		background-color: #FFF;
		box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.3);
	}
	footer>div{
		flex: 1; 	
		position: relative;
	}
	footer>div>span{
		display: inline-block;
		position: absolute;
	}
	footer>div>span:nth-of-type(1){
		height: 21px;
		width: 0.4rem;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		top: 7px;
		left: calc(50% - 0.2rem);
	}
	footer>div>span:nth-of-type(2){		
		font-size: 10px;
		height: 21px;
		width: 100%;
		left: 0;
		text-align: center;
		top: 30px;
		font-weight: bold;
	}
	footer>div>span.clases{
		background-image:  url(../assets/images/class.png);
	}
	footer>div>span.clases.active{
		background-image:  url(../assets/images/classActive.png);
	}
	footer>div>span.video{
		background-image:  url(../assets/images/video.png);
	}
	footer>div>span.video.active{
		background-image:  url(../assets/images/videoActive.png);
	}
	footer>div>span.homework{
		background-image:  url(../assets/images/homework.png);
	}
	footer>div>span.homework.active{
		background-image:  url(../assets/images/homeworkActive.png);
	}
	footer>div>span.exercise{
		background-image:  url(../assets/images/classActive.png);
	}
	footer>div>span.wrongbook{
		background-image:  url(../assets/images/wrong.png);
	}
	footer>div>span.wrongbook.active{
		background-image:  url(../assets/images/wrongActive.png);
	}
	footer>div>span.studyDiagnosis{
		background-image:  url(../assets/images/diagnos.png);
	}
	footer>div>span.studyDiagnosis.active{
		background-image:  url(../assets/images/diagnosActive.png);
	}
</style>